<template>
  <div class="more">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <!-- 批次线 -->
      <el-tab-pane label="批次线" name="first">
        <div class="select-box">
          <!-- 省份 -->
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            no-data-text="暂无数据"
            @change="provinceChange"
            v-model="provinceVal1"
            placeholder=" "
            style="width: 90px; margin: 0 10px"
          >
            <el-option
              v-for="item in provinceValList1"
              :key="item.id"
              :label="item.provinceName"
              :value="item.id"
            />
          </el-select>
        </div>
        <div>
          <div
            class="table-row el-col el-col-24 f14"
            v-for="item in piciData"
            :key="item.year"
          >
            <div class="table-fixed">
              <div class="pcl-title">{{ item.year || '-' }}年批次线</div>
              <table class="pcl-table" border="1">
                <thead>
                  <th width="300">批次/段</th>
                  <th width="300">科目</th>
                  <th width="300">控制分数线</th>
                  <th
                    class="df"
                    style="
                      height: 59px;
                      justify-content: center;
                      border: 1px solid transparent;
                    "
                  >
                    <div>压线分区间</div>
                    <el-tooltip placement="top">
                      <template #content>
                        【压线分区间】因省控线通常按该批次计划总<br />数的120%划线，因此会导致该批次近20%考生<br />存在滑档或退档风险。在此我们通过逆向计算<br />得到压线分区间，建议在此分数区间的考生选择<br />多批次填报，以降低退/滑档风险。
                      </template>
                      <QuestionFilled style="width: 16px" />
                    </el-tooltip>
                  </th>
                </thead>
              </table>
            </div>
            <table
              border-spacing="0"
              cellspacing="1"
              v-for="chilItem in item.batches"
              :key="chilItem.id"
            >
              <tbody>
                <tr>
                  <td
                    width="300"
                    align="center"
                    class="batch"
                    style="font-weight: bold"
                  >
                    {{ chilItem.batch || '-' }}
                  </td>
                  <td width="300" align="center">
                    {{ chilItem.course || '-' }}
                  </td>
                  <td width="300" align="center">
                    {{ chilItem.score || '-' }}
                  </td>
                  <td align="center">{{ chilItem.pressureRange || '-' }}</td>
                </tr>
                <tr class="remark-row" v-if="chilItem.eligibleMajorScore">
                  <td colspan="5">
                    <span class="text-666 f12" style="margin-left: 20px"
                      >专业分：{{ chilItem.eligibleMajorScore || '-' }}</span
                    >
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <!-- 提示 -->
        <div class="uzy-tzy-tip-instruction">
          <div class="el-row">
            <span class="titleBox">
              <div class="df">
                <el-icon class="iconBox">
                  <WarningFilled />
                </el-icon>
                <h6>重要提示：</h6>
              </div>
              <div
                class="dataDescription"
                v-html="pclDescription"
                style="white-space: pre-wrap"
              ></div>
            </span>
          </div>
        </div>
      </el-tab-pane>

      <!-- 一分一段 -->
      <el-tab-pane label="一分一段" name="second">
        <div class="select-box" style="align-items: center">
          <!-- 省份 -->
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            no-data-text="暂无数据"
            @change="provinceChange2(provinceVal2)"
            v-model="provinceVal2"
            placeholder=" "
            style="width: 90px; margin: 0 10px"
          >
            <el-option
              v-for="item in provinceValList2"
              :key="item.provinceCode"
              :label="item.provinceName"
              :value="item.provinceCode"
            />
          </el-select>

          <!-- 年份 -->
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            no-data-text="暂无数据"
            v-model="year"
            placeholder=" "
            @change="yearChange"
            style="width: 90px; margin: 0 10px"
          >
            <el-option
              v-for="item in yearList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>

          <!-- 专业 -->
          <el-select
            no-data-text="暂无数据"
            @change="subjectChange"
            v-model="profession"
            placeholder=" "
            style="width: 90px; margin: 0 10px"
          >
            <el-option
              v-for="item in professionList"
              :key="item"
              :label="item.course"
              :value="item.course"
            />
          </el-select>

          <el-select
            no-data-text="暂无数据"
            @change="levelChange"
            v-model="levelVal"
            placeholder=" "
            style="width: 90px; margin: 0 10px"
          >
            <el-option
              v-for="item in levelOptionsList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>

          <!-- 搜索 -->
          <div class="search df">
            <el-input
              v-model="score"
              style="width: 240px"
              placeholder="请输入分数"
              onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"
              clearable
            />
            <el-button type="primary" @click="getSchoolScorelineList(score)"
              >搜索</el-button
            >
          </div>

          <!-- 区间 -->
          <div class="section">
            {{ year }}年位次区间: {{ highestRank }} ~ {{ lowestRank }} 位
          </div>
          <div class="section">{{ year }}年同分人数: {{ sameCount }}人</div>
        </div>

        <div class="table1">
          <div class="title">历年等效分</div>
          <el-table
            :data="scoreTableData"
            style="width: 100%"
            v-loading="loading1"
          >
            <el-table-column label="类型/年份" prop="year">
              <template #default="scope">
                <div>
                  {{ scope.row.year == 0 ? '-' : scope.row.year }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="我的等效位" prop="eqRank">
              <template #default="scope">
                <div>
                  {{ scope.row.eqRank == 0 ? '-' : scope.row.eqRank }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="我的等效分" prop="eqScore">
              <template #default="scope">
                <div>
                  {{ scope.row.eqScore == 0 ? '-' : scope.row.eqScore }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="批次控制线" prop="score">
              <template #default="scope">
                <div>
                  {{ scope.row.score == 0 ? '-' : scope.row.score }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="线差">
              <template #default="scope">
                <div>
                  {{
                    scope.row.eqScore == 0 || scope.row.score == 0
                      ? '-'
                      : scope.row.eqScore - scope.row.score
                  }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="table2">
          <div class="title">
            {{ provinceVal2Name }} {{ year }} {{ profession }}
            {{ levelVal }} 分段表
          </div>
          <el-table :data="tableData" style="width: 100%" v-loading="loading2">
            <el-table-column label="分数">
              <template #default="scope">
                <div>
                  {{
                    scope.row.minScore == scope.row.maxScore
                      ? scope.row.minScore
                      : scope.row.minScore + '-' + scope.row.maxScore || '-'
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="位次区间">
              <template #default="scope">
                <div>
                  {{
                    scope.row.highestRank + '-' + scope.row.lowestRank || '-'
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="同分人数">
              <template #default="scope">
                <div>
                  {{ scope.row.sameCount || '-' }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {
  getBatchLineInfo,
  getScoreStageFilter,
  //  scoreStage
  getScoreStageInfo1,
  //   scoreStageInfo
  getScoreStageInfo2,
  getNoteDesc,
  getProvinceList,
} from '@/api/appv2/appv2';
// 获取批次线信息
const piciData = ref([]);

const allData = ref([]);
// 省份信息
const provinceVal1 = ref('');
const provinceValList1 = ref([]);
const provinceVal2 = ref('');
const provinceVal2Name = ref('');
const provinceValList2 = ref([]);

const year = ref('');
const yearList = ref([]);

const profession = ref('');
const professionList = ref([]);

const activeName = ref('first');
// 分数
const score = ref('');
// 位次区间显示
const highestRank = ref('');
const lowestRank = ref('');
const sameCount = ref('');
// 表格数据
const tableData = ref([]);
const scoreTableData = ref([]);
const yearscore = ref([]);
// 加载状态
const loading1 = ref(false);
const loading2 = ref(false);
const pclDescription = ref('');
// 批次线
function provinceChange(val) {
  localStorage.setItem('provinceId', val);
  provinceVal1.value = val;
  provinceVal2.value = val;
  getBatchLineInfoList();
}
const fetchNoteDesc = () => {
  getNoteDesc({ type: 'pclDescription', studentId: '339' }).then((res) => {
    pclDescription.value = res.data.pclDescription;
  });
};
fetchNoteDesc();
// 获取省份
function fetchProvinceList() {
  getProvinceList().then((res) => {
    if (res.code == 20000) {
      provinceValList1.value = res.data;
      if (
        Number(localStorage.getItem('provinceId')) &&
        provinceValList1.value.some(
          (obj) => obj.id == localStorage.getItem('provinceId')
        )
      ) {
        provinceVal1.value = Number(localStorage.getItem('provinceId'));
      } else {
        provinceVal1.value = res.data[0].id;
      }
      getBatchLineInfoList();
    }
  });
}
fetchProvinceList();

// 获取批次线信息
function getBatchLineInfoList() {
  loading1.value = true;
  const data = {
    pid: provinceVal1.value,
    more: 1,
    less: 0,
  };
  getBatchLineInfo(data).then((res) => {
    if (res.code == 20000) {
      piciData.value = res.data;
      loading1.value = false;
    }
  });
}

const handleClick = (tab) => {
  if (tab) {
    if (tab.props.label == '批次线') {
      getBatchLineInfoList();
    } else if (tab.props.label == '一分一段') {
      getScoreStageFilterList();
    }
  } else {
    if (activeName.value == 'first') {
      getBatchLineInfoList();
    } else {
      getScoreStageFilterList();
    }
  }
};

// 一分一段
const levelOptionsList = ref([]);
const levelVal = ref('');
function getScoreStageFilterList() {
  getScoreStageFilter().then((res) => {
    allData.value = res.data;
    // 省份 只需要code和name
    provinceValList2.value = allData.value.map(
      ({ provinceCode, provinceName }) => ({
        provinceCode,
        provinceName,
      })
    );
    if (
      Number(localStorage.getItem('provinceId')) &&
      allData.value.some(
        (obj) => obj.provinceCode == localStorage.getItem('provinceId')
      )
    ) {
      provinceVal2.value = Number(localStorage.getItem('provinceId'));
    } else {
      provinceVal2.value = provinceValList2.value[0].provinceCode;
    }

    provinceVal2Name.value = allData.value.filter(
      (v) => v.provinceCode == provinceVal2.value
    )[0].provinceName;

    let resultProData = allData.value.filter(
      (v) => v.provinceCode == provinceVal2.value
    );
    yearList.value = resultProData[0].configs.map((v) => v.year);
    year.value = yearList.value[0];
    // 专业
    if (
      localStorage.getItem('provinceId') &&
      allData.value.some(
        (obj) => obj.provinceCode == localStorage.getItem('provinceId')
      )
    ) {
      for (const v of allData.value) {
        if (v.provinceCode == provinceVal2.value) {
          for (const vv of v.configs) {
            if (vv.year == year.value) {
              professionList.value = vv.courses;
              profession.value = professionList.value[0].course;
            }
          }
        }
      }
    } else {
      professionList.value = allData.value[0].configs[0].courses;
      profession.value = professionList.value[0].course;
    }
    const provinceData = res.data.filter(
      (v) => v.provinceCode == provinceVal2.value
    );
    const yearData = provinceData[0].configs.filter(
      (v) => v.year == year.value
    );
    let optionsList = [];
    optionsList = yearData[0].courses.flatMap((course) => course.bzTypes);
    levelOptionsList.value = [...new Set(optionsList)];
    levelVal.value = levelOptionsList.value[0];
    getScoreStageInfoList();
  });
}

// 改变年份
function yearChange(val) {
  year.value = val;
  professionList.value = [];
  const provinceData = allData.value.filter(
    (v) => v.provinceCode == provinceVal2.value
  );
  let yearData = provinceData[0].configs.filter((v) => v.year == year.value);

  professionList.value = yearData[0].courses;
  profession.value = professionList.value[0].course;
  handleInitLevelData(provinceVal2.value);
  getScoreStageInfoList();
}

// 改变省份
function provinceChange2(val) {
  localStorage.setItem('provinceId', val);
  provinceVal1.value = val;
  provinceVal2.value = val;
  for (const v of allData.value) {
    if (v.provinceCode == val) {
      yearList.value = v.configs.map((v) => {
        return v.year;
      });
      year.value = yearList.value[0];
      professionList.value = v.configs[0].courses;
      profession.value = professionList.value[0].course;

      provinceValList2.value.filter((v) => {
        if (v.provinceCode == val) {
          provinceVal2Name.value = v.provinceName;
        }
      });
    }
  }
  handleInitLevelData(val);
  getScoreStageInfoList();
}
const handleInitLevelData = (province) => {
  const provinceData = allData.value.filter((v) => v.provinceCode == province);
  let yearData = provinceData[0].configs.filter((v) => v.year == year.value);
  levelOptionsList.value = [];
  levelOptionsList.value = yearData[0].courses.flatMap(
    (course) => course.bzTypes
  );
  levelOptionsList.value = [...new Set(levelOptionsList.value)];
  levelVal.value = levelOptionsList.value[0];
};

function subjectChange(val) {
  profession.value = val;
  getScoreStageInfoList();
}
const levelChange = (val) => {
  levelVal.value = val;
  getScoreStageInfoList();
};

// 搜索框
function getSchoolScorelineList(val) {
  score.value = val;
  getScoreStageInfoList();
}

// 查询信息
function getScoreStageInfoList() {
  loading2.value = true;
  const data = {
    bzType: levelVal.value,
    course: profession.value,
    pid: provinceVal2.value,
    score: score.value ? score.value : '300',
    year: year.value,
  };
  getScoreStageInfo2(data).then((res) => {
    highestRank.value = res.data.now_section.highestRank;
    lowestRank.value = res.data.now_section.lowestRank;
    sameCount.value = res.data.now_section.sameCount;

    tableData.value = res.data.list;
    yearscore.value = res.data.yearscore;
  });
  getScoreStageInfo1(data).then((res) => {
    scoreTableData.value = res.data;
  });
  loading2.value = false;
}

function setActiveName(val) {
  activeName.value = val || 'first';
  handleClick();
}

defineExpose({
  setActiveName,
});
</script>

<style lang="scss" scoped>
::v-deep(.el-tabs__header) {
  position: sticky;
  // top: -20px;
  top: 0;
  z-index: 2;
  background-color: white;
}

table {
  tr {
    background-color: #fff;

    th,
    td {
      height: 60px;
      text-align: center;
      border: 1px solid #ebeef5;
    }
  }
}

.table1,
.table2 {
  margin-top: 60px;
}

::v-deep(.el-table__cell) {
  text-align: center;
  /* 设置表格内容居中 */
}

.title {
  text-align: left;
  font-weight: bold;
  margin: 20px 0;
  font-size: 16px;
}

.select-box {
  display: flex;
  flex-direction: row;
  padding: 20px 0;
  position: fixed;
  top: 120px;
  z-index: 100;
  background-color: #fff;
  width: 100%;
}

.pcl-title {
  text-align: center;
  font-weight: bold;
  margin: 70px 0 20px;
  font-size: 16px;
}

.pcl-title {
  text-align: center;
  font-weight: bold;
  margin: 20px 0;
  font-size: 16px;
}

table {
  width: 100%;
  border-collapse: collapse; //合并为一个单一的边框
  border-color: #dfe6ec; //边框颜色按实际自定义即可
  border-left: 1px solid #ebeef5;
}

thead tr th {
  background-color: #f8f8f9; //设置表格标题背景色
  padding: 6px;
  text-align: center;
}

tbody tr td {
  padding: 6px;
  height: 48px; //设置单元格最小高度
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}

.pcl-table {
  background: #f5f5f5;
  height: 49px;
}

.search,
.section {
  margin: 0 30px;
}

.uzy-tzy-tip-instruction {
  font-size: 12px;
  color: #ff7d00;
  margin: 30px 0;
  line-height: 20px;
  width: 100%;
  border-radius: 3px;
  background: #fff7e8;
  padding: 10px;

  .el-row {
    display: flex;
    flex-direction: row;
    align-items: center;

    .el-icon {
      font-size: 20px;
      color: #ff7d00;
      margin-right: 20px;
    }

    .titleBox {
      font-size: 14px;
      font-weight: 400;
      color: #ff7d00;
      line-height: 22px;

      h6 {
        line-height: 20px;
        font-size: 14px;
        margin-bottom: 4px;
      }
    }
  }
}
</style>
